<template>
  <div><br><br><br>
    <div class="users_login">
        <el-form :model="from_user" label-width="100px" class="demo-ruleForm">

        <el-form-item>
            <el-image  :src="imgurl" @click="getImageCode"></el-image>
        </el-form-item>

        <el-form-item label="图形验证码" prop="password">
            <el-input type="type" placeholder="请输入图形验证码" v-model="from_user.imagecode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
            <el-input type="type"  placeholder="请输入手机号" v-model="from_user.mobile" autocomplete="off"></el-input>
            <el-button type="primary" :disabled='flag' @click="getsmscode">{{sms_codes}}</el-button>
            <el-input placeholder="请输入手机验证码"  v-model="from_user.mobile_code"></el-input>
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
            <el-input type="type" placeholder="请输入密码" v-model="from_user.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm">登录</el-button>
            <el-button type="primary" @click="vo_login">微博三方登录</el-button>
            <el-button type="primary" @click="reg">注册</el-button>
        </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>
import {v4 as uuid4} from 'uuid'
export default {
    data(){
        return{
            from_user:{
                mobile:"",
                password:"",
                imagecode:"",
                mobile_code:""
            },
            imgurl:"",
            imguuid:"",
            sms_codes:"发送短信验证码",
            flag:false,
            time:60,

        }
    },
    methods:{
        reg(){
            this.$router.push('/register')
        },
        vo_login(){
            this.axios.get('/getWBurl')
            .then(resp=>{
                console.log(resp)
                this.url = resp.data.url
                window.location.href = this.url
            })
        },
        submitForm(){
            this.axios.post('/users_login',this.from_user)
            .then(res=>{
                console.log(res)
                if(res.data.code == 200){
                    alert(res.data.msg)
                    localStorage.setItem('token',res.data.token)
                    localStorage.setItem('user_id',res.data.user_id)
                }else{
                    alert(res.data.msg)
                }
            })
        },
        getsmscode(){
            // 政策判断手机号是否正确，图形验证码
            var reg = /^1[3-9]\d{9}$/
            if(!reg.test(this.from_user.mobile)){
                alert('手机号格式错误')
                return
            }
            if(this.from_user.imagecode == "" || this.from_user.imagecode == null){
                alert('必须输入图片验证码')
                return
            }
            this.axios.post('/mobilecode',{'mobile':this.from_user.mobile,'imagecode':this.from_user.imagecode,'uuid':this.imguuid})
            .then(resp=>{
                console.log(resp)
                if(resp.data.code == 200){
                    
                    this.flag = true
                    var t = setInterval(()=>{
                        if(this.time == 0){
                            clearInterval(t)
                            this.time = 60
                            this.flag = false
                            this.sms_codes = "发送短信验证码"
                        }else{
                            this.time--
                            this.sms_codes = this.time + '秒'
                        }
                    },1000)
                    alert(resp.data.msg)
                }else{
                    alert(resp.data.msg)
                }
            })
        },
        getImageCode(){
            this.imguuid = uuid4()
            this.imgurl = 'http://127.0.0.1:8000/getImageCode?uuid=' + this.imguuid
        }
    },
    mounted(){
        this.getImageCode()
    }
}
</script>

<style>
.users_login{
    width: 500px;
    margin: auto;
}
</style>